<link rel="stylesheet" href="../core/resource/components/swiper/swiper.min.css?v=3">
<style>
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom:0.1rem}
.swiper-pagination-bullet {
    width: 0.5rem;
    height: 0.2rem;
    display: inline-block;
    border-radius: 0;
    background: red;
    opacity: .2;
}
.swiper-pagination-bullet-active{background:red;width:0.7rem;opacity: 1;}
</style>
<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
		<div ng-if="pagedata.setting.pluginnav.length>0" class="fui-icon-group noborder col-5 radius" style="background: #ffffff">
			<a class="fui-icon-col external" ng-if="$index<10" ng-repeat="item in pagedata.setting.pluginnav" href="javascript:;" ng-click="access_json(item.action)" data-nocache="true">
					<div class="icon"><img src="{{tomedia(item.img) || '../core/resource/images/diy/icon/icon_goods.png'}}" style="border-radius:50%"></div>
					<div class="text" style="color: #666666;">{{item.title}}</div>
			</a>
		</div>
	  </div>
	  <div class="swiper-slide" ng-if="pagedata.setting.pluginnav.length>10">
		<div  class="fui-icon-group noborder col-5 radius" style="background: #ffffff">
			<a class="fui-icon-col external" ng-if="$index>9 && $index<20" ng-repeat="item in pagedata.setting.pluginnav" href="javascript:;" ng-click="access_json(item.action)" data-nocache="true">
					<div class="icon"><img src="{{tomedia(item.img) || '../core/resource/images/diy/icon/icon_goods.png'}}" style="border-radius:50%"></div>
					<div class="text" style="color: #666666;">{{item.title}}</div>
			</a>
		</div>
	  </div>
	  <div class="swiper-slide" ng-if="pagedata.setting.pluginnav.length>20">
		<div  class="fui-icon-group noborder col-5 radius" style="background: #ffffff">
			<a class="fui-icon-col external" ng-if="$index>19 && $index<30" ng-repeat="item in pagedata.setting.pluginnav" href="javascript:;" ng-click="access_json(item.action)" data-nocache="true">
					<div class="icon"><img src="{{tomedia(item.img) || '../core/resource/images/diy/icon/icon_goods.png'}}" style="border-radius:50%"></div>
					<div class="text" style="color: #666666;">{{item.title}}</div>
			</a>
		</div>
	  </div>
	  <div class="swiper-slide" ng-if="pagedata.setting.pluginnav.length>30">
		<div  class="fui-icon-group noborder col-5 radius" style="background: #ffffff">
			<a class="fui-icon-col external" ng-if="$index>29 && $index<40" ng-repeat="item in pagedata.setting.pluginnav" href="javascript:;" ng-click="access_json(item.action)" data-nocache="true">
					<div class="icon"><img src="{{tomedia(item.img) || '../core/resource/images/diy/icon/icon_goods.png'}}" style="border-radius:50%"></div>
					<div class="text" style="color: #666666;">{{item.title}}</div>
			</a>
		</div>
	  </div>
	</div>
	<div class="swiper-pagination"></div>
</div>
 <script>
require(['swiper'], function (Swiper) {
		var swiper = new Swiper('.swiper-container', {
			pagination: {
				el: '.swiper-pagination',
			},
		});
});
</script>